<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="./general-styles-of-descendant-components.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
      /** 初始:
       * //往前插入,索引值破坏了,不能破坏顺序的话,还可以
       *    { id: 1, name: "小李", age: 12 },
            { id: 2, name: "小呗", age: 17 },
       *   
            <li key=0> 小李 </li>
            <li key=1> 小呗 </li>
       *  更新数据:

            { id: 3, name: "小王", age: 12 },
            { id: 1, name: "小李", age: 12 },
            { id: 2, name: "小呗", age: 17 },
            
            <li key=2> 小王 </li> 
            <li key=0> 小李 </li>
            <li key=1> 小呗 </li>
          diff:
            <li key=0> 小李 </li> !=== <li key=2> 小王 </li>
            重新渲染真实dom
       */

      const { Component } = React;

      class Person extends Component {
        state = {
          persons: [
            { id: 1, name: "小李", age: 12 },
            { id: 2, name: "小呗", age: 17 },
          ],
        };
        add = () => {
          const { persons } = this.state;
          const p = { id: persons.length + 1, name: "小王", age: 20 };
          this.setState({
            persons: [p, ...persons],
          });
        };
        render() {
          return (
            <div className="bg">
              <h3>key react/vue 有什么作用,内部原理,为什么不能用index</h3>
              {this.state.persons.map((item, index) => {
                return (
                  <li
                    key={this.props.isindex ? index : item.id}
                    style={{ color: "white" }}
                  >
                    {item.id}-{item.name}-{item.age}
                    <input type="text" />
                  </li>
                );
              })}
              <br />
              <button onClick={this.add}>添加一个小王</button>
            </div>
          );
        }
      }

      const App = (
        <div>
          {/* 输入类dom 不可用index */}
          <Person isindex={true}></Person>
          <br />
          {/* 手机号,身份证号,id,学号,订单号...,数据唯一标识 */}
          <Person></Person>
        </div>
      );
      ReactDOM.render(App, document.getElementById("root"));
    </script>
  </body>
</html>
